<template>
  <van-config-provider theme="light">
    <div class="main_page">
      <van-tabbar
        v-model="active"
        route
        active-color="rgb(12,52,186)"
        inactive-color="rgb(100,101,102)"
      >
        <van-tabbar-item
          v-for="(item, index) in navArr"
          :key="index"
          :to="{ name: item.toName }"
        >
          <span>{{ item.title }}</span>
          <template #icon="props">
            <img :src="props.active ? item.activeIcon : item.inactiveIcon" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
      <div class="backdrop" :style="{ 'min-height': '100vh' }">
        <router-view />
      </div>
    </div>
  </van-config-provider>
</template>

<script lang="ts" setup>
import { getAssetsImage } from '@/utils'
import { ref } from 'vue'
const active = ref(0)
const navArr = ref([
  {
    title: '首页',
    activeIcon: getAssetsImage('home_active.png'),
    inactiveIcon: getAssetsImage('home.png'),
    toName: 'Home'
  },
  {
    title: '菜单',
    activeIcon: getAssetsImage('menu_active.png'),
    inactiveIcon: getAssetsImage('menu.png'),
    toName: 'Menu'
  },
  {
    title: '购物袋',
    activeIcon: getAssetsImage('shopbag_active.png'),
    inactiveIcon: getAssetsImage('shopbag.png'),
    toName: 'Shopbag'
  },
  {
    title: '我的',
    activeIcon: getAssetsImage('my_active.png'),
    inactiveIcon: getAssetsImage('my.png'),
    toName: 'My'
  }
])
</script>

<style lang="less" scoped>
.backdrop {
  margin: 0;
  background-color: rgb(245, 245, 245);
}
</style>
